<template>
  <div class="q-pa-sm">
    <q-card flat square>
      <q-card-section class="q-pa-none q-py-md row">

        <q-separator :vertical="$q.screen.gt.xs" v-show="$q.screen.gt.xs" />
        <div class="col-sm col-xs-12 q-px-md q-pt-none">
          <q-tab-panels v-model="settingsTab" animated  transition-prev="fade" transition-next="fade" >
            <q-tab-panel name="forms" class="row q-pt-sm">
              <q-form @submit="onSubmit" class="dialog_card column" @reset="onReset">

              <div class="col-md-9 q-gutter-y-md q-pa-md" >
                <q-item-section>
                  <q-item-label><q-icon name="star" color="red" />文章标题</q-item-label>
                </q-item-section>
                <q-item-section>
                    <q-input class="col" outlined dense square v-model="form.title"  :rules="[requiredTest]" />
                </q-item-section>

                <q-item-section>
                  <q-item-label>文章是否显示</q-item-label>
                </q-item-section>
                <q-item-section>
                  <q-toggle v-model="form.visibility" color="green" :rules="[requiredTest]"   />
                </q-item-section>

                <q-item-section>
                  <q-item-label>文章是否首页显示</q-item-label>
                </q-item-section>
                <q-item-section>
                  <q-toggle v-model="form.top" color="green" :rules="[requiredTest]"   />
                </q-item-section>

                <q-item-section>
                  <q-item-label>文章概述</q-item-label>
                </q-item-section>
                <q-item-section>
                  <q-input class="col" outlined dense square v-model="form.description"  />
                </q-item-section>

                <q-item-section>
                  <q-item-label>文章排序</q-item-label>
                </q-item-section>
                <q-item-section>
                  <q-input class="col" outlined dense square v-model="form.sort"  />
                </q-item-section>

                <q-item-section>
                  <q-item-label>关键词，逗号分隔</q-item-label>
                </q-item-section>
                <q-item-section>
                  <q-input class="col" outlined dense square v-model="form.keywords"  />
                </q-item-section>


                <q-item-section>
                    <q-item-label><q-icon name="star" color="red" />详细内容</q-item-label>
                </q-item-section>
                <div class=" q-gutter-sm">
                  <!--<q-editor  v-model="form.content"  :definitions="{ bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'} }"  :rules="[requiredTest]" />-->

                  <mavon-editor ref="mdedit" v-model="form.content" style="height: 80vh" @imgAdd="$imgAdd">
                  </mavon-editor>


                </div>
                <q-separator inset="" spaced="0px" />
                <div class="row q-col-gutter-x-md ">
                  <div class="col-md-3 text-center">
                  </div>
                <div class="col-md-1 text-center">
                  <q-btn
                    class="no-border-radius"
                    unelevated
                    type="submit"
                    :loading="loading"
                    icon="camera_enhance"
                    color="primary"
                    label="保 存"
                    size="md"
                  >
                    <template v-slot:loading>
                      <q-spinner-hourglass class="on-left" />保存...
                    </template>
                  </q-btn>
                </div>
                <div class="col-md-1 text-center">
                  <q-btn
                    class="no-border-radius"
                    unelevated
                    v-close-popup
                    type="button"
                    outline style="color: goldenrod;"
                    icon="camera_enhance"
                    label="关闭"
                    size="md"
                  ></q-btn>
                </div>
                <div class="col-md-1 text-center">
                  <q-btn
                    class="no-border-radius"
                    unelevated
                    type="button"
                    :loading="loading"
                    icon="camera_enhance"
                    @click="onReset()"
                    label="重置"
                    size="md"
                    outline style="color: gray;"
                  >
                    <template v-slot:loading>
                      <q-spinner-hourglass class="on-left" />重置
                    </template>
                  </q-btn>
                </div>
                </div>
                <div class="col-md-3 text-center">
                </div>
              </div>
              </q-form>
            </q-tab-panel>


          </q-tab-panels>
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script>
import axios from "axios";
import { IndexMixin } from 'boot/mixins';
import { requiredTest } from 'boot/inputTest';
export default {
  name: 'Article',
  data() {
    return {
      article_id:'',
      form: {
        id : '',
        title : '',
        keywords : '',
        description : '',
        content : '',
        visibility : true,
        top : false,
        sort : 100,
      },
      safeData: {

      },
      accountBindData: {

      },
      newMsgData: {      },
      settingsTab: 'forms',
      employeeOptions:[],
      clientOptions: [],
      projectOptions: [],
      companyOptions: [],
      departmentOptions:['业务部','财务部'],
      isEdit: false,
      editorContent: '',
      loading: false,
    };
  },
  methods:{
    initDict(){

    },
    copyMoney(){

    },
    testLogin() {
      this.$q.loading.show();
      this.$axios.put(this.url.testLogin, this.form).then((r) => {
        if (r.success) {
          this.$info(r.message);
        } else {
          this.$error(r.message);
        }
      }).finally(() => {
        this.$q.loading.hide();
      });
    },
    requiredTest,
    getContractDetail(){
      //this.contract_id
    },
    getClient(){
      // this.clientOptions = []
      // this.$axios.get('/client/getlist').then((r) => {
      //   //this.babyWord = r;
      //   if(r.success == true){
      //     for(let i = 0;  i < r.result.records.length; i++){
      //       let temp = {'label': r.result.records[i].name , 'value': r.result.records[i].id};
      //       this.clientOptions.push(temp)
      //
      //     }
      //   }
      // });
    },
    getProject(){

    },

    onSubmit () {
      console.log( this.form  )
      if( this.isEdit ){
        //this.form.attachments = this.file_list
      }
      if(this.form.visibility == true ){
        this.form.visibility = 1
      }else{
        this.form.visibility = 0
      }
      if(this.form.top == true ){
        this.form.top = 1
      }else{
        this.form.top = 0
      }
      this.$axios.post('/articleadd', this.form).then((r) => {
        this.babyWord = r;
        if(r.code == 0){
          this.file_list = []
          this.$q.notify({ position: 'top', color: 'info', textColor: 'white', icon: 'cloud_done', group: false, html: true, message: '保存成功！！',});
          //this.refresh()
          this.onReset()
          this.$refs.dialog.hide();
        }else{
          this.$q.notify({ position: 'top', color: 'info', textColor: 'white', icon: 'cloud_done', group: false, html: true, message: '保存成功！！'+ r.code,});

        }
      });
      //evt.target.submit()
    },
    onReset(){
      this.form = {
          id : '',
          title : '',
          keywords : '',
          description : '',
          content : '',
          visibility : true,
          top : false,
          sort : 100,
      }
    },
    // 绑定@imgAdd event
    $imgAdd(pos, $file){


      console.log(1234)
      // 第一步.将图片上传到服务器.
      var formdata = new FormData();
      formdata.append('imgFile', $file);
      axios({
        url: 'ashop111/uploadfile',
        method: 'post',
        data: formdata,
        headers: { 'Content-Type': 'multipart/form-data' },
      }).then((url) => {
        // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
        /**
         * $vm 指为mavonEditor实例，可以通过如下两种方式获取
         * 1. 通过引入对象获取: `import {mavonEditor} from ...` 等方式引入后，`$vm`为`mavonEditor`
         * 2. 通过$refs获取: html声明ref : `<mavon-editor ref=md ></mavon-editor>，`$vm`为 `this.$refs.md`
         */
        $vm.$img2Url(pos, url);
      })
    }
  },
  mounted() {
    // this.contract_id = this.$route.query.id
    // this.getContract()
    // this.getProject()
    // this.getEmployee()
    // this.getClient()
    // this.getCompany()
  },
};
</script>

<style scoped>
@import 'http://at.alicdn.com/t/font_2136554_1fgggi4y4wt.css';
</style>
